<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color:red
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script src="../vuejs/vue.js"></script>
    <template id="my-app">
        <div :class="className">哈哈哈</div>
        <!-- 对象语法：{'active':boolean} -->
        <div :class="{'active':isShow}">呵呵呵呵</div>
        <button @click="getClass">切换</button>
        <!-- 也可以多个键值对 -->
        <div :class="{active:isShow,title:true}">呵呵呵</div>
        <!-- 默认的class和动态的class结合 -->
        <div class="abc ddd" :class="{active:isShow,title:true}">呵呵呵</div>
        <!-- 将对象放到一个单独的属性中 -->
        <div class="abc ddd" :class="classObj">呵呵呵</div>
        <!-- 将返回的对象放到一个methods(computed)方法中 -->
        <div class="abc ddd" :class="getClassObj()">呵呵呵</div>

    </template>
    <script>
        Vue.createApp({
            template:`#my-app`,
            data(){
                return{
                    className:'active',
                    isShow:true,
                    classObj:{
                        active:true,
                        title:true
                    }
                }
            },
            methods:{
                getClass(){
                    this.isShow=!this.isShow
                },
                getClassObj(){
                    return {
                        active:true,
                        title:true
                    }
                }
            }

        }).mount('#app')
    </script>
</body>
</html>